<template>
    <div class="app-container">
        <div class="body">

            <div class="chat-list">
                <div class="search">
                    <el-input v-model="input" placeholder="按昵称搜索" :suffix-icon="Search" />
                </div>
                <el-divider />
                <div class="user-list">
                    <div class="user-item" v-for="(user, index) in userList" :key="index"
                        :class="{ 'selected': data.selectedIndex === index }" @click="handleSelectUser(index)">
                        <div class="avatar">
                            <img alt="头像" :src="user.avatar" height="50px" />
                            <div class="unread-num" v-if="user.unreadNum > 0">
                                {{ user.unreadNum }}
                            </div>
                        </div>
                        <div class="u-content">
                            <div class="nick-name">
                                {{ user.nickName }}
                            </div>
                            <div class="u-last-message">
                                {{ user.lastMessage.content }}
                            </div>
                        </div>
                        <div class="on-line">
                            <div>
                                <img alt="在线" src="@/assets/images/online.png" />
                            </div>
                            <div class="send-time">
                                {{ format(user.lastMessage.sendTime, 'MM-dd:HH:mm') }}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="chat-detail">
                <div class="detail-top">
                    {{ selectedUser.nickName }}
                </div>

                <div class="chat-message-list" ref="chatListRef">
                    <div class="message-item" v-for="(message, mIndex) in messageList" :key="mIndex">
                        <div class="customer-send send-item" v-if="message.sendIdentity == 0">
                            <!-- 客服发送的消息也就是自己发的 -->
                            <div class="message-content">
                                <text> {{ message.content }}</text>
                            </div>
                            <div class="avatar">
                                <img alt="头像" src="@/assets/images/c-avatar.png" height="40px" />
                            </div>
                        </div>
                        <div class="user-send  send-item" v-if="message.sendIdentity ==1">
                            <!-- 用户发的消息 -->
                            <div class="avatar">
                                <img alt="头像" src="@/assets/images/u-avatar.png" height="40px" />
                            </div>
                            <div class="message-content">
                                <text>{{ message.content }}</text>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="detail-bottom">
                    <div class="chat-other">
                        <img alt="表情" src="@/assets/images/face-2c.png" height="30" />
                        <img alt="图片" src="@/assets/images/image-2c.png" height="30" />
                    </div>
                    <div class="chat-text">
                        <el-input type="textarea" input-style="{max-height:100px}" v-model="textMessage"
                            @keydown="handleKeydown" />
                    </div>
                    <div class="send-btn">
                        <el-button @click="doSendText">
                            发送
                        </el-button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script name="CustomerConfig" setup>
import { Search } from '@element-plus/icons-vue'
import { format } from 'date-fns';
import { onMounted, ref } from 'vue';
import { computed } from 'vue';
import { reactive } from 'vue'

const chatListRef = ref(null);

const textMessage = ref('')

onMounted(() => {
    scrollToBottom();
})

const handleSelectUser = (index) => {
    data.selectedIndex = index;
}

const handleKeydown = (event) => {
    if (event.key == 'Enter') {
        if (textMessage.value != null && textMessage.value.trim() != '') {
            doSendText();
            event.preventDefault();
        }
    }
}

const doSendText = () => {
    //将文本消息封装成message对象
    let params = {
        from: '2',
        target: '1',
        sendIdentity: 1, //1是客服发的消息2是用户发的消息
        messageType: 1, //1文本2图片
        content: textMessage.value
    }
    doSendMessage(params);

}
//发送消息
const doSendMessage = async (msgObj) => {
    // TODO 1.网络请求

    //将消息追加到消息列表
    messageList.value.push(msgObj);

    textMessage.value = null;

    await nextTick(); // 等待DOM更新完成
    //滚动到最新消息
    scrollToBottom();
}

const scrollToBottom = () => {
    if (chatListRef.value) {
        chatListRef.value.scrollTop = chatListRef.value.scrollHeight;
    }
}

const selectedUser = computed(() => {
    return userList.value[data.selectedIndex];
})
const data = reactive({
    userList: [
        {
            avatar: new URL('@/assets/images/u-avatar.png', import.meta.url).href,
            nickName: '球迷SDdsdsd2323',
            userId: 'SD3343434',
            unreadNum: 5,
            lastMessage: {
                content: '你好! 我是你的粉丝',
                sendTime: new Date()
            }
        },
        {
            avatar: new URL('@/assets/images/u-avatar.png', import.meta.url).href,
            nickName: '球迷SDdsdsd2324',
            userId: 'SD3343434',
            unreadNum: 4,
            lastMessage: {
                content: '你好! 我是你的粉丝',
                sendTime: new Date()
            }
        },
        {
            avatar: new URL('@/assets/images/u-avatar.png', import.meta.url).href,
            nickName: '球迷SDdsdsd2325',
            userId: 'SD3343434',
            unreadNum: 0,
            lastMessage: {
                content: '你好! 我是你的粉丝dsdsdsdsdssvdfsdf',
                sendTime: new Date()
            }
        },
        {
            avatar: new URL('@/assets/images/u-avatar.png', import.meta.url).href,
            nickName: '球迷SDdsdsd2326',
            userId: 'SD3343434',
            unreadNum: 0,
            lastMessage: {
                content: '你好! 我是你的粉丝',
                sendTime: new Date()
            }
        }

    ],
    selectedIndex: 0,
    messageList: [

        {
            from: '2',
            target: '1',
            sendIdentity: 2, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '你好，什么时候出新包sdsdsdsdsdsdsdsdsdssadsd'
        },
        {
            from: '1',
            target: '2',
            sendIdentity: 0, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '亲! 可能要下周哦'
        }, {
            from: '2',
            target: '1',
            sendIdentity: 1, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '你好，什么时候出新包sdsdsdsdsdsdsdsdsdssadsd'
        },
        {
            from: '1',
            target: '2',
            sendIdentity: 0, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '亲! 可能要下周哦'
        }, {
            from: '2',
            target: '1',
            sendIdentity: 1, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '你好，什么时候出新包sdsdsdsdsdsdsdsdsdssadsd'
        },
        {
            from: '1',
            target: '2',
            sendIdentity: 0, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '亲! 可能要下周哦'
        }, {
            from: '2',
            target: '1',
            sendIdentity: 1, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '你好，什么时候出新包sdsdsdsdsdsdsdsdsdssadsd'
        },
        {
            from: '1',
            target: '2',
            sendIdentity: 0, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '亲! 可能要下周哦'
        }, {
            from: '2',
            target: '1',
            sendIdentity: 1, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '你好，什么时候出新包sdsdsdsdsdsdsdsdsdssadsd'
        },
        {
            from: '1',
            target: '2',
            sendIdentity: 0, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '亲! 可能要下周哦'
        }, {
            from: '2',
            target: '1',
            sendIdentity: 1, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '你好，什么时候出新包sdsdsdsdsdsdsdsdsdssadsd'
        },
        {
            from: '1',
            target: '2',
            sendIdentity: 0, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '亲! 可能要下周哦'
        }, {
            from: '2',
            target: '1',
            sendIdentity: 1, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '你好，什么时候出新包sdsdsdsdsdsdsdsdsdssadsd'
        },
        {
            from: '1',
            target: '2',
            sendIdentity: 0, //0是客服发的消息1是用户发的消息
            messageType: 1, //1文本2图片
            content: '亲! 可能要下周哦'
        }
    ]
});
const { userList, messageList } = toRefs(data);
</script>

<style lang="scss" scoped>
.app-container {
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #EFF1F5;

    .body {
        width: 80%;
        // border: 1px #C5C7CD solid;
        height: 100%;
        display: flex;
        border-radius: 8px;
        overflow: hidden;

        .chat-list {
            width: 300px;
            display: flex;
            flex-direction: column;
            padding: 1rem;
            background-color: #FFFFFF;
            border-radius: 8px;

            .search {
                text-align: center;
                margin-top: 1rem;
            }

            .el-divider--horizontal {
                margin: 10px 0 !important;
            }

            .user-list {
                height: 0;
                flex-grow: 1;
                color: #2c2c2c;

                .selected {
                    background-color: #5A9CF8;
                    color: #FFFFFF !important;
                }

                .user-item {
                    height: 60px;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    border-radius: 8px;
                    padding: 0 5px;

                    .avatar {
                        width: 50px;
                        height: 50px;
                        background-color: #FFFFFF;
                        border: .5px #C4C4C4 solid;
                        border-radius: 8px;
                        position: relative;

                        // overflow: hidden;
                        img {
                            border-radius: 8px;
                        }

                        .unread-num {
                            position: absolute;
                            height: 15px;
                            width: 15px;
                            border-radius: 50%;
                            background-color: #F71C1C;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: #FFFFFF;
                            font-size: 10px;
                            right: -5px;
                            top: -5px;
                            z-index: 999;
                        }
                    }


                    .u-content {
                        display: flex;
                        flex-direction: column;
                        position: relative;
                        width: 0;
                        flex-grow: 1;
                        padding: 0 .5rem;

                        .nick-name {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            font-size: 16px;
                            font-weight: 700;
                        }

                        .u-last-message {
                            font-family: HarmonyOS Sans;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            font-size: 14px;
                            font-weight: 400;
                        }
                    }

                    .on-line {
                        display: flex;
                        justify-content: right;
                        width: 60px;
                        flex-direction: column;
                        align-items: flex-end;
                        overflow: hidden;


                        img {
                            width: 15px;
                            height: 15px;
                        }

                        .send-time {
                            font-size: 10px;
                            white-space: nowrap;
                            display: flex;
                            align-items: center;
                            line-height: 15px;
                        }
                    }
                }
            }
        }

        .chat-detail {
            width: 0;
            flex-grow: 1;
            padding: 0 1rem;
            display: flex;
            flex-direction: column;
            min-width: 300px;

            .detail-top {
                height: 65px;
                background-color: #FFFFFF;
                border-radius: 8px;
                font-family: HarmonyOS Sans;
                font-size: 18px;
                font-weight: 700;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #2c2c2c;
            }

            .chat-message-list {
                margin-top: .5rem;
                height: 0;
                flex-grow: 1;
                background-color: #FFFFFF;
                padding: 1rem;
                overflow: hidden;
                border-top-right-radius: 8px;
                border-top-left-radius: 8px;
                overflow-y: scroll;
                scrollbar-width: none;

                .message-item {
                    .send-item {
                        display: flex;

                        .avatar {
                            height: 40px;
                            width: 40px;
                            border-radius: 4px;
                            overflow: hidden;
                            border: .5px var(--el-border-color) solid;
                            overflow: hidden;
                        }

                        .message-content {
                            font-size: 16px;
                            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                            padding: 10px;
                            border-radius: 8px;
                            position: relative;
                            max-width: 70%;
                            display: flex;
                            align-items: center;
                            color: #2c2c2c;

                            text {
                                white-space: normal;
                                word-break: break-all;
                            }

                        }
                    }



                    .user-send {
                        display: flex;
                        justify-content: flex-start;

                        .message-content {
                            margin-left: 1rem;
                            background-color: #E5E5E5;

                            text::before {
                                content: '';
                                position: absolute;
                                left: -9px;
                                top: 10px;
                                border-top: 9px transparent solid;
                                border-bottom: 9px transparent solid;
                                border-right: 9px #E5E5E5 solid;
                            }
                        }
                    }

                    .customer-send {
                        display: flex;
                        justify-content: flex-end;

                        .message-content {
                            margin-right: 1rem;
                            background-color: #6A9AF1;
                            color: #FFFFFF;

                            text::after {
                                content: '';
                                position: absolute;
                                right: -9px;
                                top: 10px;
                                border-top: 9px transparent solid;
                                border-bottom: 9px transparent solid;
                                border-left: 9px #6A9AF1 solid;
                            }
                        }
                    }
                }

                .message-item+.message-item {
                    margin-top: 1rem;
                }
            }

            .detail-bottom {
                height: 210px;
                background-color: #FFFFFF;
                border-radius: 8px;
                border-bottom-right-radius: 8px;
                border-bottom-left-radius: 8px;
                box-shadow: 0 -3px 5px -3px #00000050;
                display: flex;
                flex-direction: column;
                padding: .5rem;

                .chat-other {
                    height: 30px;

                }

                .chat-other>:not(:first-child) {
                    margin-left: 10px;

                }

                .chat-text {
                    margin-top: 5px;
                    height: 130px;

                    :deep(textarea) {
                        height: 120px;
                    }
                }

                .send-btn {
                    margin-top: 5px;
                    display: flex;
                    justify-content: end;
                }
            }
        }
    }

}
</style>